import React from 'react';
import { motion } from 'framer-motion';

const Users = () => {
  const users = [
    {
      category: "高校",
      examples: ["清华大学", "北京大学", "浙江大学", "复旦大学"]
    },
    {
      category: "研究所",
      examples: ["中国科学院", "中国工程院", "航天科技集团"]
    },
    {
      category: "期刊",
      examples: ["中国科学", "科学通报", "自然科学进展"]
    }
  ];

  return (
    <div className="py-20 bg-white">
      <div className="container mx-auto px-6">
        <h2 className="text-3xl font-bold text-center mb-16">谁在使用 FlyLaTeX</h2>
        <div className="grid md:grid-cols-3 gap-8">
          {users.map((user, index) => (
            <motion.div
              key={index}
              whileHover={{ scale: 1.05 }}
              className="bg-gray-50 p-6 rounded-xl"
            >
              <h3 className="text-xl font-semibold mb-4 text-blue-900">{user.category}</h3>
              <ul className="space-y-2">
                {user.examples.map((example, i) => (
                  <li key={i} className="text-gray-600">{example}</li>
                ))}
              </ul>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Users;